import React, { Component } from "react";
import { NavBar, SideBar, Tabs, Ellipsis } from "antd-mobile";
import * as service from "../../api/index";
import "../../assets/font_b9ht5pe2k05/iconfont.css";
import "../../styles/Fenlei.scss";

class Fenlei extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      list2: [],
      list3: [],
      fenlei: "",
    };
  }

  fanhui() {
    this.props.history.go(-1);
  }
  async componentDidMount() {
    // 请求一级列表
    var res = await service.categorylist_list();

    this.state.list = res.data.data;
    this.setState({ list: res.data.data });

    //请求二级列表
    var res = await service.categorybrandlist_list({ category: "手机" });
    this.state.list2 = res.data.data;
    this.setState({ list2: res.data.data });
    //请求三级列表
    var res = await service.categorybrandprolist_list({
      category: "手机",
      brand: "Apple",
    });

    this.state.list3 = res.data.data;
    this.setState({ list3: res.data.data });
  }

  //点击某一项 发请求获取二级列表
  async dianji(item) {
    var res = await service.categorybrandlist_list({ category: item });

    this.state.list2 = res.data.data;
    this.setState({ list2: res.data.data });
    this.state.fenlei = item;
    this.setState({ fenlei: item });
    //点击一级分类获取二级分类以及三级

    var res = await service.categorybrandprolist_list({
      category: item,
      brand: this.state.list2[0].brand,
    });

    this.state.list3 = res.data.data;
    this.setState({ list3: res.data.data });
  }
  // 点击二级列表，发请求获取三级列表
  async Sanji(item) {
    var res = await service.categorybrandprolist_list({
      category: this.state.fenlei,
      brand: item,
    });

    this.state.list3 = res.data.data;
    this.setState({ list3: res.data.data });
  }

  //进入详情
  async quanbushangpin(id) {
    this.props.history.push({ pathname: "/Xiangqing", state: { id: id } });
  }

  //进入搜索页面
  Search() {
    this.props.history.push("/Search");
  }

  render() {
    return (
      <div className="Fenlei">
        <div className="header">
          {" "}
          <NavBar
            onBack={() => {
              this.fanhui();
            }}
          >
            商品分类
          </NavBar>
        </div>
        <div className="search">
          <div
            className="header_center"
            onClick={() => {
              this.Search();
            }}
          >
            <span className="iconfont icon-fangdajing"></span>
            <span className="span_search">搜素店铺内商品</span>
          </div>
        </div>
        <div className="nav">
          <div className="left">
            {this.state.list.map((item, index) => {
              return (
                <div
                  className="left_nav"
                  onClick={() => {
                    this.dianji(item);
                  }}
                  key={index}
                >
                  {item}
                </div>
              );
            })}
          </div>
          {/* 二三级列表 */}
          <div className="right">
            <div className="List">
              {this.state.list2.map((item, index) => {
                return (
                  <div className="list2" key={index}>
                    <h3
                      onClick={() => {
                        this.Sanji(item.brand);
                      }}
                    >
                      {item.brand}
                    </h3>
                  </div>
                );
              })}
            </div>

            <div className="List3">
              {
                <div className="list3">
                  {
                    //item2.list3是二级分类的三级分类列表
                    //item3是每个三级分类
                    this.state.list3.map((item3, index) => {
                      return (
                        <div
                          onClick={() => {
                            this.quanbushangpin(item3.proid);
                          }}
                          className="item3"
                          key={index}
                        >
                          <img src={item3.img1} alt="" />
                          <h5>{item3.category}</h5>
                          {/* <div className="name">{item3.proname}</div> */}
                          <Ellipsis
                            rows={2}
                            direction="end"
                            content={item3.proname}
                          />
                          <p>￥{item3.originprice}</p>
                        </div>
                      );
                    })
                  }
                </div>
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Fenlei;
